import React, { Component, Fragment } from 'react';
import {
  WeaTop, WeaFormItem, WeaSearchGroup, WeaTools, WeaDialog, WeaCheckbox, WeaLocaleProvider,
  WeaAlertPage, WeaRightMenu
} from 'ecCom';
import { WeaTableNew, WeaSwitch } from 'comsMobx';
import { inject, observer } from 'mobx-react';
import { Button, Row, Col } from 'antd';
import { toJS } from 'mobx';
import TabComponent from '../common/TabComponent';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

@inject('odocFinishStore')
@observer
class receiveRegistMobile extends Component {
  static defaultProps = {
    prefix: 'odoc-odocFinish',
  }

  componentDidMount () {
    const { odocFinishStore, location: { query } } = this.props;
    odocFinishStore.getSearchForm(query);
    odocFinishStore.getTableData(null, query);
    odocFinishStore.checkUserRight(query);
  }

  render () {
    const { prefix, odocFinishStore } = this.props;
    const { tableStore, rowSelected, selectedRowKeys, onOperatesClick, dialogShow, closeDialog, showDialog, IsCheckRight,
      getTableData, customSet } = odocFinishStore;
    const canClick = !(selectedRowKeys.length > 0);
    if (!IsCheckRight) {
      return (
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@fqb5yu`} >
          <div>
            {getLabel(2012, '对不起，您暂时没有权限！')}
          </div>
        </WeaAlertPage>
      );
    }
    const datas = [
      {
        key: "1",
        icon: <i className="icon-portal-project-o" />,
        content: getLabel('501369', '批量归档'),
        onClick: () => showDialog(true, undefined, false),
        disabled: canClick
      },
      {
        key: "2",
        icon: <i className="icon-coms-home" />,
        content: getLabel('32535', '显示列定制'),
        onClick: customSet,
      },
      {
        key: "3",
        icon: <i className="icon-coms-export" />,
        content: getLabel('28343', '导出Excel'),
        onClick: () => tableStore.exportAll(),
      },
    ];
    return (
      <div className={`${prefix}`}>
        <WeaRightMenu datas={datas}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ggx9fe`}
            title={getLabel('501859', '归档管理')}
            icon={<i className="icon-portal-official" />}
            iconBgcolor="#f14a2d"
            buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@305xaj@finish`} type="primary" onClick={() => showDialog(true, undefined, false)} disabled={canClick}>{getLabel('501369', '批量归档')}</Button>]}
          >
            <TabComponent ecId={`${this && this.props && this.props.ecId || ''}_TabComponent@t7n6vq`}
              getDataList={getTableData}
              baseSearchName="odocTile"
              searchType={['base', 'advanced']}
              getFormUrl="/api/odoc/filesenddoc/condition"
              searchCustomRender={this.searchCustomRender}
            />

            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@as3x54`}
              comsWeaTableStore={tableStore}
              rowSelection={{
                onChange: rowSelected,
                selectedRowKeys,
              }}
              getColumns={this.getColumns}
              onOperatesClick={onOperatesClick}
            />
          </WeaTop>

          <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@nlgvfp`}
            title={getLabel('21741', '公文归档')}
            visible={dialogShow}
            buttons={this.getDialogBtns()}
            onCancel={closeDialog}
            parentClassName="odoc-odocFinish-dialog"
            style={{ width: '50%', height: '600px' }}
            icon="icon-coms-official"
            iconBgcolor="#f14a2d"
          >
            {this.getDialogContent()}
          </WeaDialog>
        </WeaRightMenu>
      </div>
    );
  }

  getSearchsAdQuick = (isAd) => {
    const { odocFinishStore } = this.props;
    const { searchForm, conditions } = odocFinishStore;
    return searchForm.isFormInit ? (
      isAd ?
        conditions.map((c, index) => (
          <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@dzmwl3@${index}`}
            needTigger={false}
            title={c.title}
            showGroup={c.defaultshow}
            items={c.items.map(field => ({
              com: (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@eeaoki@${index}`}
                  label={`${field.label}`}
                  labelCol={{ span: `${field.labelcol}` }}
                  wrapperCol={{ span: `${field.fieldcol}` }}
                >
                  <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ybdoed@${index}`} fieldConfig={field} form={searchForm} />
                </WeaFormItem>
              ),
              col: field.conditionType.toUpperCase() == WeaTools.types.CASCADER ? 1 : 2,
            }))}
          />
        ),
        ) :
        conditions[0].items.map((field, index) => {
          if (field.domkey[0] == 'odocTile' || field.domkey[0] == 'odocSymbol' || field.domkey[0] == 'workflowName') {
            return (
              <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ghqsbo@${index}`}
                label={`${field.label}`}
                labelCol={{ span: `${field.labelcol}` }}
                wrapperCol={{ span: `${field.fieldcol}` }}
                className="tabSearch"
              >
                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@idgkvo@${index}`} fieldConfig={field} form={searchForm} />
              </WeaFormItem>
            );
          }
        },

        )) : null;
  }

  getButtonsAdQuick = (isAd) => {
    const { odocFinishStore } = this.props;
    const { searchForm, getSearchData, setStatus } = odocFinishStore;
    return [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7r8ur3@search`} type="primary" onClick={getSearchData}>{getLabel('388113', '搜索')}</Button>,
      ...(isAd ? [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xve2ve@reset`} type="ghost" onClick={() => searchForm.reset()}>{getLabel('2022', '重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wvih42@cancel`} type="ghost" onClick={() => setStatus({ showSearchAd: false })}>{getLabel('31129', '取消')}</Button>] : []),
    ];
  }

  getDialogBtns () {
    const { odocFinishStore } = this.props;
    const { closeDialog, odocArchive, selectedRowKeys, isLookOver } = odocFinishStore;
    const canClick = !(selectedRowKeys.length > 0);
    return [
      !isLookOver && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1514ke@finish`} type="primary" onClick={odocArchive} disabled={canClick}>{getLabel('517290', '确定归档')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@z6343m@cancel`} type="primary" onClick={closeDialog}>{getLabel('31129', '取消')}</Button>,
    ];
  }

  getDialogContent () {
    const { odocFinishStore } = this.props;
    const { RowSelectedInfo, selectedRowKeys, dialogCheck, dialogForm, ismultiple } = odocFinishStore;
    let rowInfo = <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@jkp35h`} />;
    if (ismultiple == '1') {
      rowInfo =
        (<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@p444kr`} className="showSelected">
          {
            RowSelectedInfo.map((item, index) => {
              let isChecked = false;
              toJS(selectedRowKeys).forEach((element) => {
                if (element == item.docid) {
                  isChecked = true;
                }
              });
              return (
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@s6bqxe@${index}`} className="selectedItem">
                  <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@ndsa6a@${index}`} id="test" value={isChecked} onChange={() => dialogCheck(item.docid)} />
                  <div className="selectedItemName">{item.name}</div>
                </Col>
              );
            })
          }
        </Row>);
    }
    return (
      <div className={`${ismultiple == '1' ? 'ismultiple' : 'isSingle'}`}>
        {rowInfo}
        {dialogForm.render()}
      </div>

    );
  }

  getColumns = (columns) => {
    const { odocFinishStore } = this.props;
    return columns.map((col) => {
      if (col.dataIndex == 'workflowname') {
        return {
          ...col,
          title: col.title,
          render: (text, record) => {
            if (record.randomFieldId != '') {
              return (
                <a title={record.docsubject} onClick={() => this.openWorkflow(record.randomFieldId)}>{text}</a>
              );
            }
          },
        };
      }
      if (col.dataIndex == 'docsubject') {
        return {
          ...col,
          title: col.title,
          render: (text, record) => (
            <a title={text} onClick={() => openFullWindowForXtable(`/spa/document/index.jsp?id=${record.docid}&router=1#/main/document/detail`)}>{text}</a>
          ),
        };
      }
      if (col.dataIndex == 'arc_status') {
        return {
          ...col,
          title: col.title,
          render: (text, record) =>
            <a title={record.arc_statusspan} onClick={() => odocFinishStore.onOperatesClick(record, '', '', record.arc_status)}>{record.arc_statusspan}</a>,

        };
      }
      return col;
    });
  }

  openWorkflow (requestid) {
    window.open(`/spa/workflow/index_form.jsp#/main/workflow/req?requestid=${requestid}&timestamp=1559007302025&_key=p0j59c`);
  }

  searchCustomRender = (form, condition,fns) => {
    const { odocFinishStore } = this.props;
    return form.render({ needTigger: true }, {
      ...fns,
      onEnterSearch: () => {
        fns.closeSearch();
        const formParams = form.getFormParams();
        odocFinishStore.getTableData(formParams);
      },
      isHide: (key, formParams) => {
        let hide = false;
        if (formParams.currentStatus != '1') {
          if (key == 'arcDirectory' || key == 'arcNumber' || key == 'volumeNumber' || key == 'submitter' || key == 'PersonLiable') {
            hide = true;
          }
        }
        //  处理业务显隐
        return hide;
      },
    });
  }
}

export default receiveRegistMobile;
